<template>
  <div class="maxBox">
    <!-- 头部组件 -->
    <my-head :userInfo="userInfo" />
    <!-- 导航组件 -->
    <my-nav />
    <!-- 播放记录，收藏，我的音乐组件 -->
    <my-footer :UserRecentPlayList="UserRecentPlayList"></my-footer>
  </div>
</template>

<script  type='module'>
import MyHead from './components/MyHead'// 头部组件
import MyNav from './components/MyNav'// 导航组件
import MyFooter from './components/MyFooter'// 播放记录，收藏，我的音乐组件
export default {
  name: 'My',
  props: {
  },
  data () {
    return {
      userInfo: [], // 用户信息
      UserRecentPlayList: []
    }
  },
  components: {
    MyHead, // 头部组件
    MyNav, // 导航组件
    MyFooter // 播放记录，收藏，我的音乐组件
  },
  created () {
    // 浏览器内存中获取用户信息
    const userInfo = sessionStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo) // 用户信息
      // 调用获取用户播放记录函数
      this.getUserRecentPlayList()
    }
  },
  methods: {
    // 获取用户播放记录函数
    async getUserRecentPlayList () {
      const res = await this.$http({ url: '/user/record', params: { uid: this.userInfo.userId, type: 0 } })
      this.UserRecentPlayList = res.allData.map(item => ({
        id: item.song.id, // 歌曲
        name: item.song.name, // 歌曲
        ar: item.song.ar.map(arItem => arItem.name).join('/'), // 歌曲歌手列表
        al: { // 专辑信息
          name: item.song.name,
          picUrl: item.song.al.picUrl
        }
      }))
    }
  }
}
</script>

<style lang="less" scoped>
.maxBox {
  height: 100%;
  background-color: #f5f5f5;
}
</style>
